<template>
	<view>
		<!-- <view class="top-title">
			<view class="blue" @click="cancel">取消</view>
			<view class="black">C64T-厂修-车体-三次</view>
			<view class="blue" @click="save">保存</view>
		</view> -->
		<uni-nav-bar left-text="取消" right-text="保存" @clickLeft="cancel" @clickRight="save" :title="this.carName" />
		<view class="top-box">
			<view class="top-box-left">
				<view>车号</view>
				<view>{{this.trainNo}}</view>
			</view>
			<view class="top-box-right">
				<view>车型</view>
				<view>{{this.code}}</view>
			</view>
		</view>
		<view class="main">
			<view class="main-box">
				<view class="num">
					<view>1位</view>
				</view>
				<view class="type">
					<view class="text">类型</view>
					<view>
						<u-input :select-open="showInfo" @click="showInfo = true" type="select" v-model="aaa"
							placeholder="请选择类型" />
					</view>
					<!-- 类型选择框 -->
					<u-select mode="single-column" :list="listDropTop" v-model="showInfo" @confirm="selectConfirm">
					</u-select>
				</view>
				<view class="code">
					<view class="text">转向架入库编号</view>
					<view>
						<u-input :select-open="showInfoB" @click="showInfoB = true" type="select" v-model="valueSecond"
							placeholder="请输入转向架入库编号" />
					</view>
					<!-- 编码选择框 -->
					<u-select mode="single-column" :list="listDropBottom" v-model="showInfoB" @confirm="selectConfirmB">
					</u-select>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		StockHistoryApi
	} from "./api/index.js"
	
	export default {
		data() {
			return {
				showInfo: false, //上面下拉
				listDropTop: [
				], //上面下拉菜单数据
				valueFirst: {label:'',value:""}, //上面类型默认值
				showInfoB: false, //下面下拉
				listDropBottom: [
				], //下面下拉菜单数据
				valueSecond: '', //下面下拉默认值
				//传过来的数据
				id:'',//车本身id
				carBogieId:'',//车carbogieId的id
				code:'',//车的编码
				carName:'',//车名
				trainNo:'',//车号
				list:[],//将第二个接口的数据存放在这
				options:[],//分解一下第二个数据
				secondId:"",//编号id
			};
		},
		created() {
			// console.log(this.carBogieId);
			StockHistoryApi.findAll().then(res=>{
				console.log(res);
				res.data.forEach((item,index) =>{
					this.listDropTop.push({
						label:item.name,
						value:item.id
					})
				})
			})
			StockHistoryApi.getCarBogieCode({id:this.carBogieId}).then(res=>{
				console.log(res);
				this.list=res.data
				// console.log(this.list);
				 var len = this.list.length > 10 ? 10 : this.list.length;
				this.options = this.list.slice(0, len);
				this.options.forEach((item,index)=>{
					this.listDropBottom.push({label:item.code,value:item.id})
				})
				// console.log(this.options);
			})
		},
		onLoad(options) {
			console.log(options);
			this.id = options.id
			this.carBogieId = options.carBogieId
			this.code = options.code
			this.trainNo = options.trainNo
			this.carName = options.name
			this.valueFirst.label = options.carBogieName
		},
		computed:{
			 aaa:  {  
			   get(){
				   return this.valueFirst.label	
			   },
			   set(v) {
				   this.carBogieId =  this.valueFirst.value
				   // console.log(v);
				   StockHistoryApi.getCarBogieCode({id:this.valueFirst.value}).then(res=>{
				   	console.log(res);
					this.listDropBottom=[]
					this.valueSecond=''
				   	this.list=res.data
				   	// console.log(this.list);
				   	 var len = this.list.length > 10 ? 10 : this.list.length;
				   	this.options = this.list.slice(0, len);
				   	this.options.forEach((item,index)=>{
				   		this.listDropBottom.push({label:item.code,value:item.id})
				   	})
				   	// console.log(this.options);
				   })
				 this.valueFirst.label = v  
			   },
			 }  
		},
		methods: {
			selectConfirm(e) {
				console.log(e);
				e.map((val, index) => {
					this.valueFirst.label = val.label
					this.valueFirst.value = val.value
					// this.idLeft = val.value
					// console.log(this.valueFirst);
					// console.log(this.idLeft);
				})
			},
			selectConfirmB(e) {
				console.log(e);
				e.map((val, index) => {
					this.valueSecond = val.label
					// this.idLeft = val.value
					this.secondId = val.value
					console.log(this.secondId);
					console.log(this.valueSecond);
					// console.log(this.idLeft);
				})
			},

			cancel() {
				uni.reLaunch({
					url: "../drop/drop"
				})
			},
			save() {
				// console.log(this.id);//planId
				//  console.log(this.carBogieId);//cabigouID
				// console.log(this.secondId)
				
				if(this.valueSecond==""){
					uni.showToast({
						title:"提交失败请检查输入"
					})
				} else {
					let params={
						carBogieId:this.carBogieId,
						ids:this.secondId,
						planId:this.id
					}
				StockHistoryApi.addCarBogieOfFallingCourse(params).then(res=>{
					console.log(res);
					if(res.msg=="请求成功") {
						uni.showToast({
							title:"操作成功"
						})
						setTimeout(()=>{
							uni.reLaunch({
								url:"/pages/drop/drop"
							})
						},600)
					}
				})
				}
				
			},
		},
	}
</script>

<style lang="scss">
	.top-box {
		margin-top: 20rpx;
		// width: 100%;
		height: 100rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		text-align: center;
		border: 1px solid #ddd;
		font-size: 30rpx;
	}

	.top-box-left>view:nth-of-type(1),
	.top-box-right>view:nth-of-type(1) {
		color: #CCCCCC;
	}

	.top-box-left>view:nth-of-type(2),
	.top-box-right>view:nth-of-type(2) {
		color: #999999;
	}

	.main {
		// width: 100%;
		height: calc(100vh - 210rpx);
		padding-top: 16rpx;
		background-color: #efefef;
	}

	.main-box {
		margin-top: 20rpx;
		background-color: #fff;
	}

	.main-box>view:nth-of-type(1) {
		border-top: 1px solid #ddd;
	}

	.main-box>view {
		// width: 100%;
		height: 100rpx;
		border-bottom: 1px solid #ddd;

	}

	.num>view {
		line-height: 100rpx;
		margin-left: 120rpx;
		color: rgb(153, 153, 153);
	}

	.type,
	.code {
		display: flex;
		justify-content: space-around;
		// justify-content: space-between;
		align-items: center;
		font-size: 30rpx;
		color: #666666;
	}
	.text {
		width: 210rpx;
		text-align: right;
	}

	/deep/ .uni-input-input {
			color: #FF3B30!important;
		}

	/deep/ .uni-nav-bar-text {
		font-size: 32rpx;
		font-weight: bold;
	}

	/deep/ .uni-nav-bar-right-text {
		font-size: 32rpx !important;
		color: #0079FE !important;
	}

	/deep/ .uni-navbar-btn-text span {
		font-size: 32rpx !important;
		color: #0079FE !important;
	}
</style>
